import React, { useState, useEffect } from 'react'
import { getBannerList } from '../../api/home'
import { Swiper } from 'antd-mobile'
export default function UserEffectDemo () {
  const [count, setCount] = useState(1000)
  const [username, setUsername] = useState('')
  const [bannerList, setBannerList] = useState([])
  const [position, setPosition] = useState({ x: 0, y: 0 })

  //第一种写法
  /**
   * 参数1：回调函数
   * 执行的时机：一上来会执行，任何模型发生改变，也会再次执行（用的场景比较少)
   */
  // useEffect(() => {
  //   console.log('--useEffect使用的第一种方法--')
  //   document.title = count
  // })

  //第二种写法   副作用：Dom操作
  // useEffect(() => {
  //   console.log('---useEffect使用的第二种方法----')
  //   document.title = count
  // }, [count])

  //第三种写法   副作用：发请求
  const getBannerListData = async () => {
    const res = await getBannerList()
    setBannerList(res.data)
    // console.log(res)
  }

  useEffect(() => {
    // console.log('---useEffect使用的第三种方法----')
    getBannerListData()
  }, [])

  /* 第四种写法：主要用于事件监听*/
  useEffect(() => {
    console.log('---useEffect使用的第四种方法----')
    const move = e => {
      setPosition({ x: e.clientX, y: e.clientY })
    }

    window.addEventListener('mousemove', move)

    //返回的函数，在当前组件销毁的时候执行
    return () => {
      window.removeEventListener('mousemove', move)
      console.log('--组件销毁了--')
    }
  }, [])
  return (
    <div>
      <p>count is {count}</p>
      <p>
        <button onClick={() => setCount(count + 1)}> change</button>
      </p>
      <span>username is {username}</span>
      <p>
        <input
          type='text'
          value={username}
          onChange={e => setUsername(e.target.value)}
        />
      </p>

      <Swiper loop autoplay style={{ width: '100%', height: 200 }}>
        {bannerList.map(item => {
          return (
            <Swiper.Item
              key={item.bannerid}
              style={{ width: '100%', height: 200 }}
            >
              <img
                src={item.img}
                alt=''
                style={{ width: '100%', height: '100%' }}
              />
            </Swiper.Item>
          )
        })}
      </Swiper>

      <p>
        鼠标位置:{position.x},{position.y}
      </p>
    </div>
  )
}
